<template>
	<view class="container">
		<view class="" v-for="(pos ,index) in postList" :key="index" @click="posTap(pos.aid)">
			<view class="list-one-w" >
				<view class="list-one-img">
					<image class="fengrui-img" mode="aspectFill" :src="pos.url"></image>
				</view>
				<view class="list-one-data-w">
					<view class="list-one-title">
						{{ pos.article_title}}
					</view>
					<view class="list-ona-abstract">
						{{pos.article_introduction}}
					</view>
					<view class="list-one-qu">
						<view class="list-one-time">
							<view class="list-one-time-y"></view>
							<view class="list-one-time-n">
								时间：{{pos.article_create_time}}
							</view>
						</view>
						<view class="list-one-time">
							<view class="list-one-time-l"></view>
							<view class="list-one-time-n">
								阅读：{{pos.article_read_num}}
							</view>
						</view>
						<view class="list-one-time">
							<view class="list-one-time-h"></view>
							<view class="list-one-time-n">
								评论：{{pos.article_comment_num}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 微信视频广告 每个 4哥出现一次 -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="lis-one-ad">
				<ad v-if="(index +1) % 4 == 0" :unit-id="WxAds[3].value" ad-type="video" ad-theme="white"></ad>
			</view>
			<!-- #endif -->
		</view>
		
		<!-- 没有内容 -->
		<view class="no-datalist" v-if="is_data">
			<view class="no-img">
				<image class="fengrui-img" src="../../static/data/data-no.svg" mode=""></image>
			</view>
			<view class="no-text">
				您搜索的世界不存在！或者和小姐姐跑了......
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	//#ifdef MP-WEIXIN
	let interstitialAd = null
	//#endif
	export default {
		data() {
			return {
				// 文章列表
				postList: [],
				page: 1,
				pageSize: 10,
				is_data: false,
				// 微信流量主广告
				// #ifdef  MP-WEIXIN
				WxAds: []
				//#endif
			}
		},
		onLoad(option) {
			this.catid = option.catid;
			this.getArticleList();
			// 条件编译 微信小程序 流量主广告
			// #ifdef  MP-WEIXIN
			this.getWxAds();
			//#endif

		},
		onReachBottom() {
			this.page = this.page + 1,
				this.getArticleList();
		},
		methods: {
			getArticleList: function() {
				var that = this;
				var postData = {
					page: that.page,
					pageSize: that.pageSize,
					catid: that.catid
				}
				//传输信息
				app.request('/Article/getArticleList', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							that.postList = that.postList.concat(res.data.data);
						} else {
							uni.showToast({
								icon: "none",
								title: "暂无数据"
							})
						}
						if (res.data.data == '' || res.data.data == undefined) {
							that.is_data = true
						}
						console.log('成功');
						console.log(res);
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					}
				);
			},
			posTap: function(e) {
				var posId = e;
				uni.navigateTo({
					url: "../data/data?aid=" + posId
				})
			},
			// 条件编译 微信小程序 流量主广告
			// #ifdef  MP-WEIXIN
			getWxAds:function(){
				//从缓存获取广告 0是Banner广告 1是激励式广告 2插屏广告 3视频广告 4视频贴片广告 5格子广告
				var that = this;
				var adIds=uni.getStorageSync('AdsWxList');
				that.WxAds = adIds
				console.log(that.WxAds)
				if (wx.createInterstitialAd) {
					interstitialAd = wx.createInterstitialAd({
						adUnitId: that.WxAds[2].value
					})
					interstitialAd.onLoad(() => {})
					interstitialAd.onError((err) => {})
					interstitialAd.onClose(() => {})
				}
				
				// 在适合的场景显示插屏广告
				if (interstitialAd) {
					interstitialAd.show().catch((err) => {
						console.error(err)
					})
				}
			}
		
			//#endif
		},
		// 分享小程序界面
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '小程序名字id',
				path: '/pages/index/index',
				imageUrl: ''
			}

		},
	}
</script>

<style>
	/* 没有数据时候 */
	.no-text {
		color: #ADADAD;
	}

	.no-img {

		height: 400rpx;
		width: 400rpx;
	}

	.no-datalist {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}


	/* 文章列表单排 */
	.list-one-time-n {
		color: #D3D3D3;
		font-size: 10px;
		height: 16rpx;
		line-height: 16rpx;
		margin-left: 8rpx;
	}

	.list-one-time-h {
		height: 18rpx;
		width: 18rpx;
		border-radius: 50rpx;
		background-color: #FD6D6D;
	}

	.list-one-time-l {
		height: 18rpx;
		width: 18rpx;
		border-radius: 50rpx;
		background-color: #70DDF0;
	}

	.list-one-time-y {
		height: 18rpx;
		width: 18rpx;
		border-radius: 50rpx;
		background-color: #4FABFA;
	}

	.list-one-time {
		display: flex;
		margin-top: 18rpx;
		margin-left: 18rpx;

	}

	.list-one-qu {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.list-ona-abstract {
		color: #ADADAD;
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 16rpx;
	}

	.list-one-title {
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.list-one-data-w {
		margin: 28rpx;
	}

	.list-one-img {
		height: 280rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.list-one-w {
		box-shadow: 0px 6px 9px rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;
		margin: 0rpx 0rpx 70rpx 0rpx;
		overflow: hidden;
	}

	.container {
		padding: 40rpx;
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}
</style>
